import React from 'react';
import { ListItem, ListContext } from "./ShoppingList.style"
import LazyLoad from "react-lazyload"
import loading from "@/assets/images/Loading.png"
import { useHistory } from "react-router-dom"

const ShoppingList = (props) => {
    const { item } = props
    let navigator=useHistory()
    const navigatorTo=(id)=>{
        navigator.push(`/detail/${id}`)
        
    }
    // console.log(list,'list');
    return (
        <>
            <ListContext key={item.id} onClick={()=>navigatorTo(item.id)} >
                <ListItem >
                    <LazyLoad height={100} placeholder={<img src={loading} className='load-img'/>}>
                    <img src={item.image} alt="" className="list-img" />
                    </LazyLoad>
                    <div className="list-location">·{item.location}</div>
                    <div className="list-title">{item.title}</div>
                    <div className="list-price">￥{item.price}</div>
                </ListItem>
                {/* <ListItem>
                <LazyLoad height={100} placeholder={<img src={loading} width="50%" height="50%" className='load-img'/>}>
                    <img src={item.image} alt="" className="list-img" />
                    </LazyLoad>
                    <div className="list-location">·{item.location}</div>
                    <div className="list-title">{item.title}</div>
                    <div className="list-price">￥{item.price}</div>
                </ListItem> */}
            </ListContext>
            
        </>
    )
}
export default ShoppingList